import React from 'react';
import { Breadcrumb, Icon, Table, Button, Modal, Col, Input, Carousel, message, Row, Form, Checkbox } from 'antd';
import './keyword.less';
import $ from 'jquery';
import Config from '../../common/config';

const config = new Config();
const token = sessionStorage.getItem('token')
const FormItem = Form.Item;
const confirm = Modal.confirm;

const Keyword = Form.create()(
    class Keyword1 extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                floorList: [],
                visible: false,//新增修改弹出层
                isEditing:false,//是否是编辑
                isUpdatefloorId:0,//更新修改id
            }
        }
        componentDidMount() {
            this.getFloorList();
        }
        //获取全局关键词列表
        getFloorList() {
            $.ajax({
                url: `${config.JuseHomepage}/globalKeyword/list`,
                type: "get",
                headers: {
                    Authorization: 'Bearer ' + token,
                },
                success: res => {
                    if (res.code === 200) {
                        console.log(res)
                        const floorList = res.data.rows;
                        this.setState({
                            floorList
                        });

                    } else {
                        // message.error(`${res.mes}请返回重新操作`, 2);
                    }
                }
            });
        }
        //新增弹出
        addFloorshowModal(e,values) {
            console.log(values)
            let that = this;
            this.setState({
                visible: true,
                isEditing:values? true:false,
                isUpdatefloorId:values? values.id:0,
            }, () => {
                console.log(values)
                if (values) {
                        this.props.form.setFieldsValue({
                            keywordName: values.keywordName,
                            link: values.link,
                            explain: values.explain,
                        })
                  
                } else {
                    that.props.form.resetFields();
                }
            });
        }
        //新增
        addFloorhandleOk() {
            let that= this;
            that.props.form.validateFields((err, value) => {
                if (err) {
                    return;
                }
                if (!that.state.isEditing) {
                    console.log('Received values of form: ', value);
                    $.ajax({
                        url: `${config.JuseHomepage}/globalKeyword/add`,
                        type: "post",
                        headers: {
                            Authorization: 'Bearer ' + token,
                        },
                        data: {
                            keywordName: value.keywordName,
                            link: value.link,
                            explain: value.explain,
                        },
                        success: res => {
                            if (res.code === 200) {
                                console.log(res)
                                message.success('新增成功', 2)
                                that.props.form.resetFields();
                                that.setState({
                                    visible: false,
                                }, () => that.getFloorList());
                            } else {
                                message.error(res.mes, 2)
                            }

                        }
                    });
                } else {
                    console.log('Received values of form: ', value);
                    $.ajax({
                        url: `${config.JuseHomepage}/globalKeyword/update`,
                        type: "post",
                        headers: {
                            Authorization: 'Bearer ' + token,
                        },
                        data: {
                            id: this.state.isUpdatefloorId,
                            keywordName: value.keywordName,
                            link: value.link,
                            explain: value.explain,
                        },
                        success: res => {
                            if (res.code === 200) {
                                console.log(res)
                                message.success('修改成功', 2)
                                that.props.form.resetFields();
                                that.setState({
                                    visible: false,
                                }, () => that.getFloorList());
                            } else {
                                message.error(res.mes, 2)
                            }

                        }
                    });
                }
            })


        }
        //新增取消
        addFloorhandleCancel() {
            this.setState({
                visible: false,
            });
        }

        //删除弹出
        deleteKeyword(e, record) {
            console.log(record, e)
            let that = this;
            confirm({
                title: '删除',
                content: '确定删除此关键词么？',
                onOk() {
                    that.deleteKeywordhandleOk(record)
                },
                onCancel() { },
            });
        }
        //删除确定事件
        deleteKeywordhandleOk(record) {
            console.log(record)
            $.ajax({
                url: `${config.JuseHomepage}/globalKeyword/delete`,
                type: "post",
                headers: {
                    Authorization: 'Bearer ' + token,
                },
                data: {
                    id: record.id,
                },
                success: res => {
                    if (res.code === 200) {
                        console.log(res)
                        this.getFloorList()
                    }
                }
            })

        }
        render() {
            const { getFieldDecorator } = this.props.form;
            const { isEditing, id, keywordName, link, explain, } = this.props;
            const columns = [{
                title: '全局关键字',
                dataIndex: 'keywordName',
                width: '25%',
            }, {
                title: '链接',
                dataIndex: 'link',
                width: '25%',
                render: (text, record) => (
                    <a href={text} target='_blank'>{text}</a>
                )
            }, {
                title: '说明',
                dataIndex: 'explain',
                width: '25%',
            }, {
                title: '操作',
                key: 'edit',
                width: '25%',
                render: (text, record) => (
                    <span>
                        <a href="javascript:void(0);" onClick={() => this.addFloorshowModal(this, record)} >编辑</a><span style={{paddingLeft:20}}></span><a href="javascript:void(0);" onClick={() => this.deleteKeyword(this, record)}>删除</a>
                    </span>
                )
            }];
            return (
                <div className='goods-label'>
                    <div className='goods-label-cont clearfix'>
                        <div className='goods-label-cont-nav clearfix'>
                            <Breadcrumb separator=">">
                                <Breadcrumb.Item>首页管理</Breadcrumb.Item>
                                <Breadcrumb.Item>全局关键字管理</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className='allgoods-table clearfix' style={{ marginTop: 10 }}>
                            <Table
                                className="floor-table"
                                rowKey="id"
                                columns={columns}
                                dataSource={this.state.floorList}
                                pagination={false}
                                bordered
                            />
                            <div className='goods-label-tabletr'>
                                <Button className='goods-label-table-app' width={160} icon="plus" onClick={() => this.addFloorshowModal()}>新增</Button>
                            </div>
                            <Modal
                                title={!this.state.isEditing? '新增' : "修改"}
                                visible={this.state.visible}
                                onOk={this.addFloorhandleOk.bind(this)}
                                onCancel={this.addFloorhandleCancel.bind(this)}
                            >
                                <Form layout="vertical">
                                    <FormItem >
                                        {getFieldDecorator('keywordName', {
                                            rules: [{ required: true, message: '请填写全局关键字' }]
                                        })(<Input addonBefore="全局关键字" />)}
                                    </FormItem>
                                    <FormItem>
                                        {getFieldDecorator('link')(<Input addonBefore="链接" />)}
                                    </FormItem>
                                    <FormItem>
                                        {getFieldDecorator('explain')(<Input addonBefore="说明" />)}
                                    </FormItem>
                                </Form>
                            </Modal>
                        </div>
                    </div>
                </div>
            )
        }
    }

);
export default Keyword;